<template>
  <uni-popup ref="replaceUnit" type="bottom"  :safeArea="false" zindex>
    <view class="box-con">
      <view class="rep_u text-left" @touchmove.stop.prevent="stopPrevent">
      	<view class="rep_tit text-white">
      		<!-- <view v-if="fromRez" class="rez_tit flex align-center text-left">
      			<view class="padding-left-lg padding-right padding-tb margin-top-sm">
      				<text class="cuIcon-back margin-right-xxs"></text> 返回修改
      			</view>
      			<view class="flex-sub padding-top-sm padding-left-lg">
      				<view class="padding-left-lg text-xll">
      					安排结果
      				</view>
      				<view class="text-sm">
      					(以最终提交订单为准)
      				</view>
      			</view>
      		</view> -->
      		
      		<view class="padding-top-lg text-xll padding-left">
      			请选择您的服务更换要求
      		</view>
      		
      	</view>
      	<view class="rep_main p_rlt padding-top-lg">
      		<scroll-view scroll-y="true" class="rep_scr">
      			<view class="rep_sv p_rlt">
      				<view class="rep_itm flex text-left">
      					<view class="reptit padding-top-lg text-c9 padding-left padding-right-sm">
      						项目
      					</view>
      					<view class="flex-sub">
      						<block v-for="(item,index) in sevProList" :key="index">
      							<view v-if="shopSet.onlyShowMoxa!='5'||(shopSet.onlyShowMoxa=='5'&&item.gtin_sku=='AJ0001')" :class="{active:sevId==item.goods_id}" @click.stop="tapSevItem(item)" class="d_ib re_itm text-lg padding-lr-xs text-center xs">
      								{{item.name||''}}
      							</view>
      						</block>
      						
      					</view>
      				</view>
      				<view class="rep_itm flex text-left padding-top-xs">
      					<view class="reptit padding-top-lg text-c9 padding-left padding-right-sm">
      						时长
      					</view>
      					<view class="flex-sub">
      						<view v-for="(item,index) in timeList" :key="index" :class="{active:timeClass==index}" @click.stop="tapSevTime(index)" class="d_ib re_itm sm text-lg padding-lr-xs text-center">
      							{{item.name||''}}分钟
      						</view>
      						<!-- <view class="d_ib act re_itm sm text-lg padding-lr-xs text-center">
      							90分钟
      						</view> -->
      					</view>
      				</view>
      				<block v-for="(mitem, mindex) in morFeatList" :key="mindex" v-if="false">
      					<view v-if="mitem.pid == '1088'" class="rep_itm flex text-left padding-top-xs">
      						<view class="reptit padding-bottom-sm p_rlt flex flex-direction justify-center padding-top-sm text-c9 padding-left padding-right-sm">
      							<view>
      								消费
      							</view>
      							<view>
      								金额
      							</view>
      							<view class="text-xxs repdis text-center">
      								最低价(会员）
      							</view>
      						</view>
      						<view class="flex-sub">
      							<!-- <view class="d_ib df active re_itm text-lg padding-lr-xs text-center">
      								<view class="flex align-center justify-center">
      									不限md
      								</view>
      							</view> -->
      							<view v-for="(citem,cindex) in mitem.list" :key="cindex" :class="{active:ranClass==cindex}" @click.stop="tapRange(citem,cindex)" class="d_ib xs re_itm text-lg padding-lr-xxs text-center">
      								<view class="flex align-center justify-center intlh fullbox">
      									<view class="flex align-center justify-center text-df">
      										<view class="frft2">
      											<text v-if="citem.min_price" class="text-ms1">¥</text>
      											{{citem.min_price?citem.min_price:citem.name}}
      										</view>
      										<block v-if="citem.max_price&&citem.min_price!=citem.max_price">
      											<text class="acon-a-05 text-d9"></text>
      											<view class="flft2">
      												{{citem.max_price}}
      											</view>
      										</block>
      									</view>
      								</view>
      							</view>
      						</view>
      					</view>
      					<view v-else class="rep_itm flex text-left padding-top-xs">
      						<view class="reptit padding-top-lg text-c9 padding-left padding-right-sm">
      							{{ mitem.title||'' }}
      						</view>
      						<view class="flex-sub">
      							<view v-for="(citem,cindex) in mitem.list"
      							:key="cindex" 
      							:class="{active:mitem.slcId == citem.id}" 
      							@click.stop="tapHotItem(citem.id, mitem.pid, mindex,'taphot')"
      							class="d_ib re_itm text-lg padding-lr-xxs text-center xs">
      							{{ citem.name || '' }}
      							</view>
      						</view>
      					</view>
      				</block>
      				<!-- 更多 -->
      				<view class="moreBox" :class="{show:showrmore}">
      					<view v-for="(mitem,mindex) in morFeatList" :key="mindex" class="rep_itm flex text-left padding-top-xs">
      						<view class="reptit padding-top-lg text-c9 padding-left padding-right-sm">
      							{{ mitem.title||'' }}
      						</view>
      						<view class="flex-sub">
      							<view v-for="(citem,cindex) in mitem.list"
      							:key="cindex" 
      							:class="{act:mitem.slcId == citem.id}" 
      							@click.stop="tapHotItem(citem.id, mitem.pid, mindex,'tapmore')"
      							class="d_ib re_itm text-lg padding-lr-xxs text-center xs">
      								{{ citem.name || '' }}
      							</view>
      							
      						</view>
      					</view>
      				</view>
      				<view class="text-center text-c9 padding-top-xs">
      					<view class="d_ib padding-lr-xl padding-top-sm" @click.stop="showrmore=!showrmore">
      						<view class="">
      							{{showrmore?'收起':'更多条件'}}
      						</view>
      						<view class="text-center" >
      							<text :class="[showrmore?'cuIcon-fold':'cuIcon-unfold']"></text>
      						</view>
      					</view>
      				</view>
      			</view>
      		</scroll-view>
      		<view class="cback_btn pad_b48">
      			<view class="full_btn" @click="confirm">
      				确定
      			</view>
      		</view>
      	</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  const emit = defineEmits(["confirm"])
  const replaceUnit = ref(null)
  // const range_time = ref(0),
  const repeatClick = ref(false)
  const showrmore = ref(false)
  const fromRez = ref(false)
  const sevId = ref(null)
  const timeList = ref<any>([
    {
      cwId : 199,
      endPrice:139,
      minute:null,
      name:'40',
      specId:null,
      startPrice:129,
      timeNums:0.67,
    }
  ])
  const timeClass = ref(0)
  const hotFeatList = ref<any>([])
  const morFeatList = ref<any>([])
  const lexOrgList = ref([])
  const window = ref(991)
  const multiMedia = ref(991)
  const techLevId = ref(991)
  const gendId = ref(991)
  const blindId = ref(991)
  const romMdId = ref(991)
  const smokyId = ref(991)
  const ranClass = ref(null)
  const priceScope = ref(false)
  const minPrice = ref('')
  const maxPrice = ref('')
   
  // pickerValue1: [0, 0, 0],
  // hourList1:[],
  // minList1:[],
  // dayList: [],
  // titTips:'为保障您的预约服务'
  const props = defineProps({
  	type: {
  		type: String,
  		default: 'modal'
  	},
  	curItem:{
  		type:Object,
  		default: ()=>{}
  	},
  	shopSet:{
  		type:Object,
  		default: ()=>{}
  	},
    featList:{
    	type:Object,
    	default: ()=>{}
    },
  	hopeTime: {
  		type: String,
  		default: ''
  	},
  	sellerId: {
  		type: String,
  		default: ''
  	},
    
  	// sellerId: {
  	// 	type: String || null,
  	// 	default () {
  	// 			return '';
  	// 	}
  	// },
  	// tuiappointTime: {
  	// 	type: String,
  	// 	default: ''
  	// },
  	// tipsCode:{
  	// 	type: String,
  	// 	default: '10'
  	// },
  	sevProList: {
  		type: Array,
  		default: ()=>[]
  	},
  	// targetTime: { type: Number },
  	// ndataString: {
  	// 	type: String,
  	// 	default: ''
  	// },
  	showClose: {
  		type: Boolean,
  		default: false
  	},
  	// nzIndex:{
  	// 	type: Boolean,
  	// 	default: false
  	// },
  	isShow: {
  		type: Boolean,
  		default: false
  	},
  	canClose: {
  		type: Boolean,
  		default: true
  	}
  	// showBtn: {
  	//   type: Boolean,
  	//   default: true
  	// }
  });
  const stopPrevent = () => {}
  
  const confirm = ()=> {
  	if (repeatClick.value) {
  		return;
  	}
  	repeatClick.value = true;
  	setTimeout(() => {
  		repeatClick.value = false;
  	}, 500);
  	close()
  	changeSevItem()
  }
  
  const changeSevItem = () => {}
  
  const open = () => {
    replaceUnit.value.open()
    morFeatList.value = props.featList 
  }
  
  const close = () => {
    replaceUnit.value.close()
  }
  const tapRange = (item,index) =>{
  	
  	if(ranClass.value===index){
  		return
  	}
    ranClass.value= index
  	// // sevProList[aptClass].timeList[slecProId]
  	// console.log(this.sevProList[this.aptClass],item)
  	// let ndata = {
  	// 	sellerMemberId:this.sellerId,
  	// 	timeNums:this.timeList[this.timeClass].timeNums,
  	// 	goods_id:this.curItem.serviceGoodsId,
  	// 	min_price:item.min_price||'',
  	// 	max_price:item.max_price||''
  	// }
  	// this.minPrice = item.min_price 
  	// this.maxPrice = item.max_price
  	// this.getmFeatList(ndata,'taprange')
  }
  const  tapHotItem = (id, type, index, source = '',name='') => {
  	source === 'taphot' 
  	if(source === 'tapmore'){
  		// this.$set(this.morFeatList[index], 'slcId', id);
  		// this.$set(this.morFeatList[index], 'dname', name);
      morFeatList.value[index].slcId = id;
      morFeatList.value[index].dname = name;
  	}
  	console.log('type+123',type,id,source)
  	switch (type) {
  		case '995'://级别
  			 techLevId.value = id; 
  			break;
  		case '999':
  			 gendId.value = id;
  			break;
  		case '997':
  			 romMdId.value = id;
  			break;
  		case '1000':
  			blindId.value = id;
  			break;
  		case '1057':
  			//有烟
  			smokyId.value = id;
  			break;
  		case '1084':
  			//多媒体:有、无
  			multiMedia.value = id;
  			break;
  		case '1085':
  			//窗口：有窗、无窗
  			window.value = id;
  			break;
  		default:
  			break;
  	}
  }
  const tapSevItem = (item,source='tap_sev') =>{
    console.log(item)
  	sevId.value = item.goods_id
  	// this.getTimeSilceList(this.sevId, source);
  }
  
  const tapSevTime = (index:any) => {
    console.log(index)
  }
  
  defineExpose({ open, close })
</script>

<style scoped lang="scss">
  .box-con {
    background-color: #fafafa;
    border-radius: 16rpx 16rpx 0 0;
    padding-bottom: 80rpx;
    flex-shrink: 0;
    min-height: 502rpx;
    max-height: 96vh;
    position: relative;
  }
  .rep_u{
	height: 1088rpx;
	width: 100vw;
}
.rep_tit{
	height: 200rpx;
  border-radius: 16rpx 16rpx 0 0;
	background:#56BF7A;
}
.rep_main{
	width: 100vw;
	height: 950rpx;
	background: #fff;
	border-radius: 16rpx 16rpx 0 0;
	top: -70rpx;
	left: 0;
}
.rep_scr{
	width: 100%;
	height: calc(100% - 160rpx);
}
// .rep_sv{
// 	padding-bottom: 110rpx;
// }
.repdis{
	position: absolute;
	left: -4rpx;
	bottom: 0;
	width: 100%;
	height: 22rpx;
	
}
.reptit{
	width: 140rpx;
	// min-width: 140rpx;
}
.re_itm{
	height: 72rpx;
	border-radius: 10rpx;
	line-height: 71rpx;
	&.active{
		background: #56BF7A!important;
		color: #fff!important;
		.text-d9{
			color: #fff;
		}
	}
	&.act{
		background: #fff!important;
		color: #56BF7A!important;
		border: 1px solid #56BF7A!important;
		box-shadow: 0px 4px 18px rgba(73, 194, 131, 0.2);
	}
	&.xs,&.sm,&.df,&.md{
		background: rgba(243, 243, 255, 0.5);
		border: 1px solid #F3F3FF;
		
	}
	&.xs{
		min-width: 138rpx;
		margin:20rpx 12rpx 0 0;//14
	}
	&.sm{
		min-width: 182rpx;//200
		margin:20rpx 20rpx 0 0;//20 30 0 0
	}
	&.df{
		min-width: 280rpx;
		margin:20rpx 20rpx 0 0;
	}
	&.md{
		min-width: 180rpx;
		margin:20rpx 16rpx 0 0;
	}
	
}

.text-d9{
	// color: #D9D9D9;
	margin-top: -5rpx;
	color: #333;
	font-size: 16rpx;//14
}
// .flft{
// 	margin-left: -8rpx;
// }
// .frft{
// 	margin-right: -8rpx;
// }
.text-xxxs{
	font-size: 10rpx!important;
}
.rep_mbtn{
	position: absolute;
	width: 100%;
	height: 112rpx;
	left: 0;
	bottom: 0;
}
.moreBox{
	width: 100%;
	height: 0;
	overflow: hidden;
	&.show{
		height: auto;
	}
}
.text-ms1{
	font-size: 16rpx;
}
.cback_btn{
  width: 695rpx;
  margin: 0 auto;
}
</style>